
<template>
  <div class="steps_cnt">
    <div>
      <slot name="batchAddUpdates">
        <h3 style="font-weight: 550; margin-bottom: 20px">一、下载模板</h3>
        <p>
          <a :href="downloadTemp+'?type='+ type">点击下载模板</a>
        </p>
        <h3 style="font-weight: 550; margin-bottom: 20px">二、上传文件 </h3>
        <p>1、必填项检查：身份证号、离职日期、离职原因、社保停缴月份、公积金停缴月份</p>
        <p>2、单次导入行数不超过5000行</p>
      </slot>

      <slot name="batchLeavePosition">
        <h3 style="font-weight: 550; margin-bottom: 20px">一、导入员工信息</h3>
        <p>
          1、系统按照列名称进行匹配：姓名、身份证号、手机（号）、民族、入职日期等
        </p>
        <p>2、系统不支持合并单元格数据导入</p>
        <p>
          3、系统根据身份证号进行数据新增或更新（更新时，如新导入数据字段为空值，将不会直接覆盖）
        </p>
        <h3 style="font-weight: 550; margin-bottom: 20px">
          二、后台按照标准模版自动抓取数据，完成后将通知
        </h3>
      </slot>

      <UploadExcel />

      <a-button class="next_btn" type="primary" ref="nextBtn" @click="nextBtnClkFn" style="opacity: 0;"> 下一步 </a-button>
    </div>
  </div>
</template>

<script>
import UploadExcel from '@/pages/components/uploadExcel'
import { downloadTemp } from '@/services/api'

export default {
  name: "steps1",
  components: { UploadExcel },
  data () {
    return {
      downloadTemp,
      type: 'employee_quit' // 批量离职下载模板type
    };
  },
  methods: {
    nextBtnClkFn (val) {
      this.$emit('nextBtnClk', val) // 1-step2  2-step3      
    }
  },
};
</script>

<style scoped lang="less">
.steps,
.steps_cnt {
  max-width: 950px;
  margin: 16px auto;
}

.steps_cnt {
  div {
    margin-top: 30px;
  }
}

.next_btn {
  display: block;
  margin: 20px auto;
}
</style>
